// 根据数据创建ele
var lstorage=window.localStorage;
var myinfo=lstorage.getItem("myinfo");
var eduinfo=lstorage.getItem("eduinfo");
var expinfo=lstorage.getItem("expinfo");
var demoinfo=lstorage.getItem("demoinfo");
var expectinfo=lstorage.getItem("expectinfo");
var skillsinfo= lstorage.getItem("skillsinfo");
var imgInfo = lstorage.getItem("imginfo");

var myinfo2=JSON.parse(myinfo);
var eduinfo2=JSON.parse(eduinfo);
var expinfo2=JSON.parse(expinfo);
var demoinfo2=JSON.parse(demoinfo);
var expectinfo2=JSON.parse(expectinfo);
var skillsinfo2=JSON.parse(skillsinfo);
var imgInfo2=JSON.parse(imgInfo);
// console.log(imgInfo2);

var oPage1 = document.querySelector(".page1");
var oPage2 = document.querySelector(".page2");
var oPage3 = document.querySelector(".page3");
var oPage4 = document.querySelector(".page4");
var oPage5 = document.querySelector(".page5");
var oPage6 = document.querySelector(".page6");

for(var i=0;i<eduinfo2.length;i++){
	createEdu(eduinfo2[i],i);
}
for(var i=0;i<expinfo2.length;i++){
	createExp(expinfo2[i]);
}
for(var i=0;i<demoinfo2.length;i++){
	createDemo(demoinfo2[i]);
}
for(var i=0;i<expectinfo2.length;i++){
	valueExpect(expectinfo2[i]);
}
for(var i=0;i<myinfo2.length;i++){
	valueInfo(myinfo2[i]);
}
// edu专用
function createEdu(data,i){
	var obj = oPage2.querySelector(".flexbox");
	var flex = document.createElement("div");
	flex.className = "flex";
	flex.classList.add("edu"+i);
	var innerh = "";
	innerh += '<p class="educont1 educont">'+data["eduTime"]+'</p>';
	innerh += '<p class="educont2 educont">'+data["school"]+'</p><p class="educont3 educont">'+data["degree"]+'</p>';
	innerh += '<p class="educont4 educont">'+data["major"]+'</p>';
	innerh += '<div class="dropwrap"><span class="tpy">'+data["eduOthers"]+'</span>';
	flex.innerHTML = innerh;
	obj.appendChild(flex);
}
// exp专用
function createExp(data){
	var obj = oPage3.querySelector(".flexbox");
	var flex = document.createElement("div");
	var innerh = "";
	innerh += '<div class="center flex"><p class="">'+data["jobTime"]+'</p>';
	innerh += '<p class="">'+data["company"]+'</p><p class="">'+data["position"]+'</p>';
	innerh += '<p class=" text jobWords">'+data["jobDescribe"]+'</p></div>';
	flex.innerHTML = innerh;
	obj.appendChild(flex);
}
// demo专用
function createDemo(data){
	var obj = oPage5.querySelector(".flexbox");
	var flex = document.createElement("div");
	var innerh = "";
	innerh += '<div class="center flex"><div>'+data["demoName"]+'</div><div><a href="'+data["demoLink"]+'" target="_blank" class="link">'+data["demoLink"]+'</a>';
	innerh += '</div><p class="text">'+data["demoDescribe"]+'</p></div>';
	flex.innerHTML = innerh;
	obj.appendChild(flex);	
}
// myinfo专用
function valueInfo(data){
	var oInfocont = document.querySelector('.infocont');
	var oname = oInfocont.querySelector('.name');
	var ogender = oInfocont.querySelector('.gender');
	var ohighestEdu = oInfocont.querySelector('.highestEdu');
	var oYears = oInfocont.querySelector('.yearsOfworking');
	var ocity = oInfocont.querySelector('.city');
	var ophone = oInfocont.querySelector('.phone');
	var oemail = oInfocont.querySelector('.email');
	oname.innerHTML = data["name"];
	ogender.innerHTML = data["gender"];
	ohighestEdu.innerHTML = data["highestEdu"];
	oYears.innerHTML = data["yearsOfworking"];
	ocity.innerHTML = data["city"];
	ophone.innerHTML = data["phone"];
	oemail.innerHTML = data["email"];
}
// expect专用
function valueExpect(data){
	var ojobType = oPage6.querySelector(".jobType");
	var otimeType = oPage6.querySelector(".timeType");
	var oexpectCity = oPage6.querySelector(".expectCity");
	var oexpectPay = oPage6.querySelector(".expectPay");
	var oothers = oPage6.querySelector(".others");
	ojobType.innerHTML = data["jobType"];
	otimeType.innerHTML = data["timeType"];
	oexpectCity.innerHTML = data["expectCity"];
	oexpectPay.innerHTML = data["expectPay"];
	oothers.innerHTML = data["others"];
}
// skills专用
function createBar(obj,name,value){
	var oWrap = document.createElement("div");
	obj.appendChild(oWrap);
	var oName = document.createElement("span");
	oName.style.marginLeft="10px";
	oName.innerHTML = name;
	oWrap.appendChild(oName);
	var oScore = document.createElement("span");
	oScore.style.marginRight = "10px";
	oScore.style.cssFloat="right";
	oScore.innerHTML = value;
	oWrap.appendChild(oScore);
	var oDiv = document.createElement("div");
	oDiv.style.position = "relative";
	oDiv.style.width = "100%";
	oWrap.appendChild(oDiv);
	var oBar = document.createElement("div");
	oBar.className = "skill-bar";
	oDiv.appendChild(oBar);
	var oColor = document.createElement("span");
	oColor.className = "rangeColor";
	setInterval(function(){
		var rate = oBar.offsetWidth/100;
		oColor.style.width = value*rate + "px";
	},200);	
	oDiv.appendChild(oColor);
}
function createSkills(){
	var otableBody = oPage4.querySelector(".table-body");
	for(var i=0;i<skillsinfo2[0].length;i++){
		var oTr = document.createElement("tr");
		var oTh = document.createElement("th");
		var oTd = document.createElement("td");
		var oP = document.createElement("p");
		oTh.className = "skills-cont";
		oP.className = "skills-rate";
		otableBody.appendChild(oTr);
		oTr.appendChild(oTh);
		oTr.appendChild(oTd);
		oTd.appendChild(oP);
		createBar(oTh,skillsinfo2[0][i],skillsinfo2[1][i])
		oP.innerHTML = skillsinfo2[2][i];
		if(skillsinfo2[0].length>4){
			otableBody.style.fontSize = "20px";
		}else if(skillsinfo2[0].length>6){
			otableBody.style.fontSize = "16px";
		}
	}
}
createSkills();
// 加载头像
function loadImg(){
	var oMyPhoto = document.querySelector(".myPhoto");
	oMyPhoto.src = imgInfo2[0];
}
loadImg();
// 交互动画部分
// 设置每页高度
window.onload = function(){
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var oShowBox = document.getElementsByClassName('showBox');
for(var i=0;i<oShowBox.length;i++){
	oShowBox[i].style.height = clientHeight + "px";
}
var winW = document.documentElement.clientWidth || document.body.clientWidth;
var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight;
addclass();
animate1();
// 当滚动到某页时开始动画
var flagedu = 1;
var flagexp = 1
var oCircles = document.getElementsByClassName("circle");
window.onscroll = function(){
	var htmlTop=document.body.scrollTop||document.documentElement.scrollTop;
	for(var i=0;i<oCircles.length;i++){
		if(htmlTop>=(clientHeight*i)&&htmlTop<(clientHeight*(i+1))){
			for(var k=0;k<oCircles.length;k++){
				oCircles[k].classList.remove("circle-backg");
			}
			oCircles[i].classList.add("circle-backg");
		}
	}
	if(clientHeight<=htmlTop&&htmlTop<(clientHeight*2)){
		positionChange();
		flagedu ++;
		if(flagedu==2){
			drop();
		}
	}else if((clientHeight*2)<=htmlTop&&htmlTop<(clientHeight*3)){
		flagexp ++;
		if(flagexp==2){
			autoType();			
		}
	}
};
// 右侧边定位圆圈
var rightBar = document.querySelector(".rightbar");
document.onmousemove = function(e){
	if((e.clientX/winW)>0.9){
		rightBar.style.visibility = "visible";
		rightBar.style.opacity = "1";
	}else{
		rightBar.style.visibility = "hidden";
		rightBar.style.opacity = "0";
	}
}

for(var i=0;i<oCircles.length;i++){
	oCircles[i].index = i;
	oCircles[i].onclick = function(){
		document.body.scrollTop = clientHeight*(this.index);
		document.documentElement.scrollTop = clientHeight*(this.index);
		for(var k=0;k<oCircles.length;k++){
			oCircles[k].classList.remove("circle-backg");
		}
		this.classList.add("circle-backg");
	}
}

// 设置横竖条动画配合css
function animate1(){
	var timer1 = setTimeout(function(){
	var abar = document.querySelector(".acrossbar");
	abar.style.left = "0px";
	var timer2 = setTimeout(function(){
		var vbar = document.querySelector(".verticalbar");
		vbar.style.top = "0px";
	},500);
},500);
}
function addclass(){
	var infots = oPage1.querySelectorAll(".infot");
	for(var i=0;i<infots.length;i++){
		infots[i].classList.add("shaker");
	}
	var infocs = oPage1.querySelectorAll(".infoc");
	for(var i=0;i<infocs.length;i++){
		infocs[i].classList.add("fade");
	}
}
// 设置edu里文字归位的动画配合css
function positionChange(){
	var edus = oPage2.getElementsByClassName("flex");
	for(var j=0;j<edus.length;j++){
		var oEducont = edus[j].querySelectorAll(".educont");
		for(var i=0;i<oEducont.length;i++){
			var cls = "educont" + (i+1);
			oEducont[i].classList.remove(cls);
		}
	}
}
// edu里的自由落体动画
function drop(){
	var box = document.querySelector(".tpy");
	var oWrap = document.querySelector(".dropwrap");
	var wrapH = oWrap.offsetHeight;
	var judgeTop = true;
	var myTop = box.offsetTop;
	var t00=0,t01=0;
	var t10=0,t11=0;
	var step=0.1;
	var speedy=0;
	var speedy1=0;
	var speedym=0;
	var a=1.5;
	var opacity=0;
	function movey(){
		var boxW = box.offsetWidth;
		var wrapW = oWrap.offsetWidth;
		box.style.left = (wrapW-boxW)/2 + "px";
		opacity = opacity + 0.01;
		box.style.opacity = opacity;	
		if(judgeTop){
			t01=t00+step;
			speedy=4.9*(t01*t01-t00*t00);
			t00=t01;
			myTop = box.offsetTop;
			box.style.top = myTop + speedy +"px";
			if(myTop>=wrapH-box.offsetHeight-speedy){
				speedym=speedy;
				box.style.top = myTop+"px";
				t00=0;
				t01=0;
				judgeTop = false;			
			}	
		}else{
			t11=t10+step;
			speedy1 = 4.9*(t11*t11-t10*t10);
			t10 = t11;
			myTop = box.offsetTop;
			box.style.top = myTop - (speedym/a) + speedy1 + "px";
			if(speedy1-(speedym/a)>=0){
				t10=0;
				t11=0;
				judgeTop = true;
				a=a+0.1;		
			}
		}	
	}
	var timery = setInterval(movey,10);
	// 15秒后清除计时器
	setTimeout(function(){
		clearInterval(timery);
	},15000)
}
// exp里简单的自动打字动画
function autoType(){
	var jobwords = document.querySelector(".jobWords");
	var types = jobwords.innerHTML;
	var tempWord = "";
	var startType = setInterval(function(){
		tempWord = types.substring(0,tempWord.length+1);
		jobwords.innerHTML = "&nbsp;"+tempWord;
	},200);
	// 15秒后清除计时器
	setTimeout(function(){
		clearInterval(startType);
	},15000)
}


// 版块变小部分
toSmall();
function toSmall(){
	var oToSmall = document.getElementsByClassName("to-small");
	var boxW = winW;
	for(var i=0;i<oToSmall.length;i++){
		oToSmall[i].index = i;		
		oToSmall[i].addEventListener("click",function(){
			boxW = this.parentNode.offsetWidth;
			if((boxW/winW)>0.55){
				this.parentNode.style.width = "50%";
				if(this.index<(oToSmall.length-1)){
					oToSmall[(this.index+1)].parentNode.style.width = "50%";
				}else{
					return false;
				}			
				boxW = this.parentNode.offsetWidth;
			}else{
				this.parentNode.style.width = "33.33%";
				boxW = this.parentNode.offsetWidth;
				if(this.index>0&&this.index<(oToSmall.length-1)){
					var boxWprev = oToSmall[(this.index-1)].parentNode.offsetWidth;
					var boxnext = oToSmall[(this.index+1)].parentNode.offsetWidth;
					if((boxWprev/winW)>0.55&&(boxnext/winW)<0.55){
						oToSmall[(this.index+1)].parentNode.style.width = "33.33%";
						if(this.index==(oToSmall.length-2)){
							return false;
						}else{
							oToSmall[(this.index+2)].parentNode.style.width = "33.33%";	
							}									
						}
					if((boxnext/winW)>0.55&&(boxWprev/winW)<0.55&&(boxWprev/winW)>0.34){
						oToSmall[(this.index-1)].parentNode.style.width = "33.33%";
						oToSmall[(this.index+1)].parentNode.style.width = "33.33%";	
						}
					if((boxnext/winW)<0.55&&(boxWprev/winW)<0.55){
							return false;
						}					
				}else if(this.index==0){
					oToSmall[(this.index+1)].parentNode.style.width = "33.33%";
					oToSmall[(this.index+2)].parentNode.style.width = "33.33%";	
				}else if(this.index==oToSmall.length-1){
					return false;
				}
			}	
		})	
	}
}
// 监控当版块变最小后清除右上角文字
function hiddenSamll(){
	var oToSmall = document.getElementsByClassName("to-small");
	for(var i=0;i<oToSmall.length;i++){
		if((oToSmall[i].parentNode.offsetWidth)/winW<0.35){
			oToSmall[i].style.display = "none";
		}
		if((oToSmall[i].parentNode.offsetWidth)/winW>0.35){
			oToSmall[i].style.display = "block";
		}
	}
}
setInterval(hiddenSamll,500);

// 监控myinfo版块，当变小时让横条消失
var page1main = oPage1.querySelector(".page1main");
var across = oPage1.querySelector(".across");
var photo = oPage1.querySelector(".photo");
function check1(){
	if(oPage1.offsetWidth/winW<0.55){
		page1main.style.fontSize = "22px";
		across.style.display = "none";
		photo.className = "photo2";
	}
	if(oPage1.offsetWidth/winW<0.35){
		page1main.style.fontSize = "18px";
		photo.className = "photo3";
	}
}
setInterval(check1,200);

// 监控skills版块，当变小时字体变小
function checkSkills(){
	if(oPage4.offsetWidth/winW<0.55){
		oCenterskill.style.width = "90%";
		oTable.style.fontSize = "16px";
	}
}
setInterval(checkSkills,200);

// edu exp demo版块涉及多个，当版块变小时内容需调整
var oFlex2 = oPage2.getElementsByClassName("flex");
var oFlex3 = oPage3.getElementsByClassName("flex");
var oFlex5 = oPage5.getElementsByClassName("flex");
var text3 = oPage3.querySelectorAll(".text");
var text5 = oPage5.querySelectorAll(".text");
var link5 = oPage5.querySelectorAll(".link");
var odropwrap = oPage2.querySelector(".dropwrap");

function fontSmall(){	
	if(oFlex2.length>2){
		for(var i=0;i<oFlex2.length;i++){
			if(oPage2.offsetWidth/winW<0.55){
				oFlex2[i].style.fontSize = "22px";
			}
			if(oPage2.offsetWidth/winW<0.35){
				oFlex2[i].style.fontSize = "16px";
			}
		}
	}
	fontSmall2(oFlex3,oPage3,text3);
	fontSmall2(oFlex5,oPage5,text5);

}
function fontSmall2(oflex,opage,text){
	if(oflex.length==1){
		for(var i=0;i<oflex.length;i++){
			oflex[i].style.width = "60%";
		}
	}
	if(oflex.length>1){
		for(var i=0;i<oflex.length;i++){
			oflex[i].style.width = "45%";
			if(opage.offsetWidth/winW<0.55){
				oflex[i].style.fontSize = "20px";
				text[i].style.fontSize = "16px";
			}
			if(opage.offsetWidth/winW<0.35){
				oflex[i].style.fontSize = "16px";
				text[i].style.fontSize = "14px";
			}
		}
	}
}
setInterval(fontSmall,200);

}